<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="practice.css">
    <title>CSS3练习</title>
</head>

<body>
    <div>
        <h2>
            边框边框
        </h2>
        <div class="box-shadow">
            盒阴影效果
        </div>

        <span>边框图像，使用图像来做边框</span>
        <div class="round">
            边框 图像 平铺
        </div>
        <div class="stretch">
            边框 图像 拉伸
        </div>

        <h2>CSS3关于文本的练习</h2>
        <div class="text">text</div>

        <h3 class="twoD-title">2D转换 3D转换</h3>
        <div class="twoD">
            tranform()
        </div>

        <h3 class="donghua-title">动画</h3>
        <div class="donghua">
        </div>

        <h3>列</h3>
        <div class="column">column-span 表示跨域列，跨域几列几列；</div>

        <h3 class="user-title">用户界面</h3>
        <!-- <div class="user">用户界面用户界面用户界面</div> -->
        <div class="container">
            <img src="7-2.jpg" alt="图片" class="icon" width="500px" height="500px">
            <div class="topleft">左上角</div>
        </div>

        <div class="card">
            <img src="7-1.jpg" alt="sea" class="image-7-1" style="width: 500px;" height="400px">
            <div class="card-txet">
                beautiful
            </div>
        </div>

        <div class="btn-all">
            <button class="btn-1">beatuiful btn</button>
        </div>

        <div class="page">
            <li><a href="#">.. </a></li>
            <li><a href="#">1</a></li>
            <li><a class="active" href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">..</a></li>
        </div>

        <div class="border">这是个边框
        </div>

        <div class="flex-container">
            <div class="flex-item">one</div>
            <div class="flex-item">two</div>
            <div class="flex-item">three</div>
        </div>
    </div>


</body>

</html>